<template>
    <div class="staff-info"> 
        <div class="staff-info-nav">
            <!-- 返回按钮 -->
            <div class="back-button">
                <button @click="goBack" class="back-button">返回</button>
            </div>
        
            <!-- 员工姓名显示 -->
            <div class="employee-info">
                <label>员工姓名:</label>
                <span>{{ employeeName || '加载中...' }}</span>
            </div>
        </div>
    </div>
    <div class="staff-info-container">
        <div v-if="loading" class="loading">
            加载中...
        </div>
        <div v-else-if="error" class="error">
            {{ error }}
        </div>
        <div v-else>
            <!-- <h2>{{ employeeName }} 的详细信息</h2> -->
            <div class="info-tabs">
                <div class="tab-header">
                    <button 
                        :class="{ active: activeTab === 'attendance' }" 
                        @click="activeTab = 'attendance'"
                    >
                        考勤记录
                    </button>
                    <button 
                        :class="{ active: activeTab === 'allowance' }" 
                        @click="activeTab = 'allowance'"
                    >
                        加班记录
                    </button>
                </div>
                <div class="tab-content">
                    <AttendanceInfo v-if="activeTab === 'attendance'" :userId="userId" />
                    <Allowance v-if="activeTab === 'allowance'" :userId="userId" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useRoute,useRouter } from 'vue-router';
import { ref, onMounted, watch } from 'vue';
import axios from '../axios/index.js';
import AttendanceInfo from '../components/AttendanceInfo.vue';
import Allowance from '../components/Allowance.vue';

export default {
    name: 'StaffInfo',
    components: {
        AttendanceInfo,
        Allowance
    },
    setup() {
        const route = useRoute();
        const router = useRouter(); // 获取路由实例
        const userId = ref(parseInt(route.params.id) || 0);
        // console.log('userId:', userId.value);
        const employeeName = ref('');
        const loading = ref(true);
        const error = ref(null);
        const activeTab = ref('attendance');

        // 获取员工信息
        const fetchStaffInfo = async () => {
            if (!userId.value) return;
            
            try {
                const response = await axios.get(`/staff/${userId.value}`);
                if (response.data && response.data.code === 2000) {
                    // console.log('response.data.data:', response.data.data);
                    employeeName.value = response.data.data.user_name;
                    userId.value = response.data.data.user_id;
                } else {
                    error.value = '无法获取员工信息';
                }
            } catch (err) {
                error.value = '获取员工信息失败';
                console.error('Error fetching staff info:', err);
            } finally {
                loading.value = false;
            }
        };

        // 监听 userId 的变化
        watch(userId, async (newVal) => {
            if (newVal !== 0) {
                console.log('userId updated:', newVal);
            }
        });

        onMounted(() => {
            fetchStaffInfo();
        });

        // 返回按钮方法
        const goBack = () => {
            router.push('/staff');
        };

        return {
            userId,
            employeeName,
            loading,
            error,
            activeTab,
            goBack
        };
    }
};
</script>

<style scoped>
.staff-info{
    margin-top: 80px;
    display: flex;
    flex-direction: column;
}
.staff-info-nav {
    display: flex;
    justify-content: space-between;
}
.employee-info {
    margin: auto;
    width: 200px;
    margin-right: 20px;
}
.back-button button{
    background-color: aliceblue;
}
.tab-header button { 
    background-color: #007bff;
    color: white;
}
</style>